<template>
	<div class="wrapper">
		<div class="title">我的订单</div>
		<div class="orders">
			<div class="order" v-for="(item, index) of list" :key="index">
				<div class="order__title">
					{{item.shopName}}
					<span class="order__status">{{item.isCanceled ? '已取消': '已下单'}}</span>
				</div>
				<div class="order__content">
					<div class="order__content__imgs">
						<img
							class="order__content__img"
							v-for="(itm, idx) of item.products"
							:key="idx"
							:src="itm.product.img"
						/>
					</div>
					<div class="order__content__info">
						<div class="order__content__price">&yen;{{item.price}}</div>
						<div class="order__content__count">共{{item.count}}件</div>
					</div>
				</div>
			</div>
		</div>
		<Tab :currentIndex="2" />
	</div>
</template>

<script>
	import { defineComponent, reactive, toRefs } from 'vue'
	import Tab from '../../components/Tab'
	import { get } from '../../utils/request'

	const ERR_OK = 0

	const useOrdeListEffect = () => {
		const data = reactive({ list: [] })
		const getList = async() => {
			const result = await get('/api/order')
			if (result && result.errno === ERR_OK && result.data.length) {
				result.data.forEach(item => {
					let count = 0
					let price = 0
					item.products.forEach(pro => {
						count += pro.orderSales
						price += pro.product.price * pro.product.sales
						item.price = price.toFixed(2)
						item.count = count
					})
				})
				data.list = result.data
			}
		}
		getList()
		const { list } = toRefs(data)
		return {
			list
		}
	}

	export default defineComponent({
		name: 'OrderList',
		components: { Tab },
		setup() {
			const { list } = useOrdeListEffect()
			return {
				list
			}
		}
	})
</script>

<style lang="scss" scoped>
	@import '../../style/variable.scss';

	.wrapper {
		overflow-y: auto;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background: rgb(248, 248, 248);
		.title {
			line-height: .44rem;
			background: #fff;
			font-size: .16rem;
			color: $content-font-color;
			text-align: center;
		}
		.orders {
			.order {
				margin: .16rem .18rem;
				padding: .16rem;
				background: #fff;
				&__title {
					margin-bottom: .16rem;
					line-height: .22rem;
					font-size: .16rem;
					color: $content-font-color;
				}
				&__status {
					float: right;
					font-size: .14rem;
					color: #999;
				}
				&__content {
					display: flex;
					&__imgs {
						flex: 1;
					}
					&__img {
						width: .4rem;
						height: .4rem;
						margin-right: .12rem;
					}
					&__info {
						width: .7rem;
					}
					&__price {
						margin-bottom: .04rem;
						line-height: .2rem;
						font-size: .14rem;
						color: $highlight-fontColor;
						text-align: right;
					}
					&__count {
						line-height: .14rem;
						font-size: .12rem;
						color: $content-font-color;
						text-align: right;
					}
				}
			}
		}
	}
</style>
